<template>
  <div class="comments">
    <!-- 评论列表 -->
    <van-list v-model="loading" :finished="finished" @load="onload">
      <van-cell v-for="item in list" :key="item.auto_id">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <div class="msg">
            <van-image
              round
              width="40px"
              height="40px"
              :src="item.aut_photo"
              fit="cover"
            />
            <div class="info">
              <div>{{ item.aut_name }}</div>
              <div>{{ item.content }}</div>
              <div class="other">
                <span>{{ item.pubdate | timeFilter }}</span>
                <van-button size="mini" class="btn" @click="reply(item)">
                  回复({{ item.reply_count }})
                </van-button>
              </div>
            </div>
            <div class="right">
              <van-icon name="like" :color="item.is_liking ? 'red' : ''" />
              <span class="num">{{ item.like_count }}</span>
            </div>
          </div>
        </template>
      </van-cell>
    </van-list>
    <!-- 评论输入框 -->
    <van-field
      v-model="content"
      center
      clearable
      placeholder="请输入评论"
      class="bottom"
      @keyup.enter="send"
    >
      <template #button>
        <van-button size="small" type="info" @click="send">发布</van-button>
      </template>
    </van-field>
    <!-- 回复面板 -->
    <van-action-sheet v-model="replyShow" title="发表回复">
      <reply v-if="replyShow" :currentComment="currentComment"></reply>
      <!-- 将保存的currentComment通过父子组件传值传递到reply组件中 -->
    </van-action-sheet>
  </div>
</template>

<script>
import reply from './reply.vue'
import { getCommentsApi, setCommentsApi } from '@/api'
export default {
  data () {
    return {
      loading: false,
      finished: false,
      content: '',
      list: [], // 评论列表
      offset: null,
      end_id: null,
      replyShow: false,
      // 保存当前评论信息
      currentComment: ''
    }
  },
  components: {
    reply
  },
  //   props: {
  //     id: {
  //       type: Number,
  //       required: true
  //     }
  //   },

  methods: {
    async onload () {
      console.log(this.$route.query.id)
      const id = this.$route.query.id
      const res = await getCommentsApi({
        type: 'a',
        source: id,
        limit: 5,
        offset: this.offset
      })

      console.log(res)
      // 保存数据，并渲染
      this.list = [...this.list, ...res.data.data.results] // 不能覆盖
      this.offset = res.data.data.last_id
      this.end_id = res.data.data.end_id
      //   将loading值改为false
      console.log(this.list)
      this.loading = false
      if (this.end_id === this.offset) {
        //   表示最后一页
        // 关闭数据源
        this.finished = true
      }
    },
    async send () {
      if (this.content.trim() === '') {
        return (this.content = '')
      }
      const res = await setCommentsApi({
        target: this.$route.query.id,
        content: this.content
      })
      console.log(res.data)
      //   保存数据，追加到list列表
      this.list.unshift(res.data.data.new_obj)
      //   输入框一般都要做非空判断以及清空输入框内容
      this.content = ''
    },
    reply (item) {
      this.currentComment = item
      this.replyShow = true
      console.log(this.currentComment)
    }
  }
}
</script>

<style lang="less">
.comments {
  .msg {
    margin-bottom: 58px;
    display: flex;
    .info {
      flex: 1;
      margin: 0 10px;
      .other {
        margin-top: 20px;
        display: flex;
        align-items: center;
        .btn {
          margin-left: 10px;
        }
      }
    }
    .right {
      .num {
        margin-left: 5px;
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>
